<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Cpu usage</h3>
                <div class="panel-options">
                    <a href="#" data-toggle="panel">
                        <span class="collapse-icon">&ndash;</span>
                        <span class="expand-icon">+</span>
                    </a>
                    <a href="#" data-toggle="remove">
                        &times;
                    </a>
                </div>
            </div>
            <div class="panel-body">

                <hc-chart ytitle="Seconds" id="cpumon" series="cpuSeries" loadfunc="cpuloadfunc" style="height: 200px;">Placeholder for pie chart</hc-chart>
            </div>
        </div>

    </div>
</div>
<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Memory usage</h3>
                <div class="panel-options">
                    <a href="#" data-toggle="panel">
                        <span class="collapse-icon">&ndash;</span>
                        <span class="expand-icon">+</span>
                    </a>
                    <a href="#" data-toggle="remove">
                        &times;
                    </a>
                </div>
            </div>
            <div class="panel-body">

                <hc-chart ytitle="Megabytes"  series="memorySeries" loadfunc="memloadfunc" style="height: 200px;">Placeholder for pie chart</hc-chart>
            </div>
        </div>

    </div>
</div>
<!-- network usage-->
<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Rx network usage</h3>
                <div class="panel-options">
                    <a href="#" data-toggle="panel">
                        <span class="collapse-icon">&ndash;</span>
                        <span class="expand-icon">+</span>
                    </a>
                    <a href="#" data-toggle="remove">
                        &times;
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <!-- Highcharts customized  directive-->
                <hc-chart ytitle="Bytes"  series="networkSeries_rx" loadfunc="networkloadfunc_rx" style="height: 200px;">Placeholder for pie chart</hc-chart>
            </div>
        </div>

    </div>
</div>
<div class="row">
    <div class="col-sm-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Tx network usage</h3>
                <div class="panel-options">
                    <a href="#" data-toggle="panel">
                        <span class="collapse-icon">&ndash;</span>
                        <span class="expand-icon">+</span>
                    </a>
                    <a href="#" data-toggle="remove">
                        &times;
                    </a>
                </div>
            </div>
            <div class="panel-body">
                <hc-chart ytitle="Bytes"  series="networkSeries_tx" loadfunc="networkloadfunc_tx" style="height: 200px;">Placeholder for pie chart</hc-chart>
            </div>
        </div>

    </div>
</div>

    <!--<hc-chart title="cpu usage"  series="cpuSeries" loadfunc="cpuloadfunc">Placeholder for pie chart</hc-chart>-->
    <!--<hc-chart title="cpu usage" id="cpumon" series="cpuSeries" loadfunc="cpuloadfunc">Placeholder for pie chart</hc-chart>-->
    <!--<hc-chart title="memory usage" series="memorySeries" loadfunc="memloadfunc">Placeholder for pie chart</hc-chart>
    <hc-chart title="Rx network usage"  series="networkSeries_rx" loadfunc="networkloadfunc_rx">Placeholder for pie chart</hc-chart>
    <hc-chart title="Tx network usage"  series="networkSeries_tx" loadfunc="networkloadfunc_tx">Placeholder for pie chart</hc-chart>-->



